<!--
 * @Description: FRM题库 -- frm_practice
 * @Author: your name
 * @Date: 2024-01-02
 * @LastEditTime: 2024-01-02
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="frmPractice heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: '/exam_practice/FRM/frmQuestionbank', query: { cid } }"
        >
          FRM
        </el-breadcrumb-item>
        <el-breadcrumb-item> {{ cate_name }} </el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 做题模式 topic_model == 1 -->
      <div
        style="display: flex; justify-content: space-between"
        v-if="topic_model == 1 && type_t"
      >
        <div class="testBox">
          <div>
            <div class="top" v-if="InfoListObj.id == nowposition">
              <h5>
                {{ topicList.length - nowposition + 1 }}.[
                {{
                  InfoListObj.type == 1
                    ? '单项选择题'
                    : InfoListObj.type == 2
                    ? '多选题'
                    : InfoListObj.type == 3
                    ? '判断题'
                    : InfoListObj.type == 4
                    ? '填空题'
                    : '测试题'
                }}]
              </h5>
              <div class="operations">
                <div @click="wd_show = true">
                  <img src="@/assets/images/ask1.png" alt="" />
                  <span>提问</span>
                </div>
                <div @click="correct_err_show = true">
                  <img src="@/assets/images/errorCor1.png" alt="" />
                  <span>纠错</span>
                </div>
                <div @click="shoucang(InfoListObj)">
                  <img
                    v-if="!is_collection"
                    src="@/assets/images/collected.png"
                    alt=""
                  />
                  <img
                    v-if="is_collection"
                    src="@/assets/images/noCollect.png"
                    alt=""
                  />
                  <span v-if="is_collection">取消收藏</span>
                  <span v-if="!is_collection">收藏</span>
                </div>
              </div>
            </div>

            <!-- 单选/多选 -->
            <div
              v-if="
                (InfoListObj.id == nowposition && InfoListObj.type == 1) ||
                InfoListObj.type == 2 ||
                InfoListObj.type == 3
              "
            >
              <div class="testTit">{{ InfoListObj.title }}</div>
              <div class="options">
                <div
                  v-for="(option, index) in frmOpList"
                  :key="index"
                  :class="{
                    optionBox: true,
                    activeCss: option.is_xuan && index + 1
                  }"
                  @click="chose_answer(option, InfoListObj, index)"
                >
                  <div class="option">
                    {{ option.value }}
                  </div>
                  <div class="optionText">{{ option.title }}</div>
                </div>
              </div>
            </div>

            <!-- text题 -->
            <div v-if="InfoListObj.id == nowposition && InfoListObj.type == 4">
              <div class="testTit">{{ InfoListObj.title }}</div>
              <input
                v-model="InfoListObj.user_answer"
                type="text"
                class="textinput"
                @blur="chose_answer(InfoListObj.op, InfoListObj)"
              />
            </div>

            <!-- footer按钮 -->
            <div class="openAnalysis" v-if="InfoListObj.id == nowposition">
              <!-- <div class="btn" @click="toscan()">查看解析</div> -->
              <div
                class="btn"
                @click="toprev(InfoListObj.id)"
                style="margin-left: 10px"
              >
                上一题
              </div>
              <div class="btn" @click="tonext(InfoListObj.id, InfoListObj)">
                下一题
              </div>
            </div>

            <div class="analysisBox" v-if="InfoListObj.id == 0">
              <!-- 试题解析 -->
              <div class="yourAns">
                正确答案：<span>{{ oplist[Number(item.answer - 1)] }}</span>
                &nbsp;&nbsp;您的答案：
                <span
                  v-if="item.answer == item.user_answer_index"
                  style="color: #00af63"
                >
                  {{ oplist[Number(item.user_answer_index - 1)] }}
                </span>
                <span
                  v-if="item.answer != item.user_answer_index"
                  style="color: #ff8a8d"
                >
                  {{ oplist[Number(item.user_answer_index - 1)] }}
                </span>
              </div>
              <!-- 视频解析 -->
              <div>
                <span class="tit">视频解析：</span>
                <div
                  class="video"
                  style="width: 530px; height: 100%; background: #e0e0e0"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @playing="onPlayerPlaying($event)"
                    @ended="onPlayerEnded($event)"
                  >
                  </video-player>
                </div>
              </div>
              <!-- 答案解析 -->
              <div v-if="!false">
                <span class="tit">答案解析：</span>
                <p style="width: 690px" v-html="item.analysis"></p>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="timePause">
              <p class="time">
                用时：<span> {{ timing }} </span>
              </p>
              <button @click="stop">暂停</button>
            </div>
            <div class="center">
              <!-- <button @click="Saveprogress()">保存进度下次继续</button> -->
              <button @click="submitShow = true">交卷</button>
            </div>
            <div class="progressBox" v-if="topicarr.length > 0">
              <span>进度:</span>
              <el-progress
                :percentage="(donum / topicarr.length) * 100"
                style="width: 125px"
                :stroke-width="10"
                color="0193ff"
                :show-text="false"
              >
              </el-progress>
              <span>{{ donum }}/{{ topicarr.length }}题</span>
            </div>
          </div>

          <div class="tiList">
            <div class="tit">答题卡</div>
            <div class="listBox">
              <div class="testSitu">
                <p>已答</p>
                <p>未答</p>
              </div>
              <div class="list" style="padding-top: 10px">
                <span
                  :class="{ nodo: item.is_do !== 1 }"
                  v-for="(item, index) in sheetArr"
                  :key="index"
                  @click="cardto(item)"
                >
                  {{ index + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 背题模式 topic_model == 2 -->
      <div
        style="display: flex; justify-content: space-between"
        v-if="topic_model == 2 && type_t == 1"
      >
        <div class="testBox">
          <div v-for="item_b in topicarr" :key="item_b.tid">
            <div class="casebox" v-if="item_b.position == nowposition">
              <div v-html="item_b.case_content"></div>
            </div>

            <div class="top" v-if="item_b.position == nowposition">
              <h5>{{ item_b.position }}.[单项选择题]</h5>
              <div class="operations">
                <div @click="wd_show = true">
                  <img src="@/assets/images/ask1.png" alt="" />
                  <span>提问</span>
                </div>
                <div @click="correct_err_show = true">
                  <img src="@/assets/images/errorCor1.png" alt="" />
                  <span>纠错</span>
                </div>
                <div @click="shoucang(item_b)">
                  <img
                    v-if="!item_b.is_collection"
                    src="@/assets/images/collected.png"
                    alt=""
                  />
                  <img
                    v-if="item_b.is_collection"
                    src="@/assets/images/noCollect.png"
                    alt=""
                  />
                  <span v-if="item_b.is_collection">取消收藏</span>
                  <span v-if="!item_b.is_collection">收藏</span>
                </div>
              </div>
            </div>

            <!-- 单选 -->
            <div v-if="item_b.position == nowposition">
              <div class="testTit" v-html="item_b.title"></div>
              <div class="options">
                <div
                  :class="{
                    optionBox: true,
                    topic_t: item_b.answer == index + 1
                  }"
                  v-for="(option, index) in item_b.op"
                  :key="index"
                >
                  <div class="option">
                    {{ oplist[index] }}
                  </div>
                  <div class="optionText">{{ option }}</div>
                </div>
              </div>
            </div>

            <!-- text题 -->
            <div v-if="false">
              <div>
                <div>v-html="item.title"</div>
                <input
                  v-model="user_answer_index"
                  type="text"
                  class="textinput"
                  @blur="
                    chose_answer(item.position, item, item.user_answer_index)
                  "
                />
                <div>文本题系统不做判断，请自评掌握情况:</div>
                <div class="tbtn">
                  <div
                    :class="{ active: 1 == opena }"
                    @click="isknow(item.position, item, 1)"
                  >
                    已掌握
                  </div>
                  <div
                    :class="{ active: 2 == opena }"
                    @click="isknow(item.position, item, 2)"
                  >
                    未掌握
                  </div>
                </div>
              </div>
            </div>

            <!-- footer按钮 -->
            <div class="openAnalysis" v-if="item_b.position == nowposition">
              <!-- <el-button type="primary" disabled>查看解析</el-button> -->
              <div
                class="btn"
                @click="toprev(item_b.position)"
                style="margin-left: 10px; border-radius: 5px"
              >
                上一题
              </div>
              <div
                class="btn"
                @click="tonext(item_b.position)"
                style="border-radius: 5px"
              >
                下一题123
              </div>
            </div>

            <div class="analysisBox" v-if="item_b.position == nowposition">
              <!-- 答案解析 -->
              <div v-if="!false">
                <span class="tit">答案解析：</span>
                <p style="width: 690px" v-html="item_b.analysis"></p>
              </div>
              <!-- 视频解析 -->
              <div>
                <span class="tit">视频解析：</span>
                <div
                  class="video"
                  style="width: 530px; height: 100%; background: #e0e0e0"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @playing="onPlayerPlaying($event)"
                    @ended="onPlayerEnded($event)"
                  >
                  </video-player>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="tiList">
            <div class="tit">答题卡</div>
            <div class="listBox">
              <div class="testSitu">
                <!-- <p>已答</p>
                <p>未答</p> -->
                <span>提示：背题模式下只允许查看题目解析</span>
              </div>
              <div class="list" style="padding-top: 10px">
                <span
                  v-for="(item, index) in sheetArr"
                  :key="index"
                  :class="{ nodo: item.is_do == 1 }"
                  @click="cardto(item.position)"
                >
                  {{ index + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 答疑 -->
    <transition name="leftToright">
      <div class="common_dialog ans_que" v-if="wd_show">
        <div class="inner_con">
          <div class="title">
            问答
            <div class="close" @click="close_wd"></div>
          </div>
          <div class="row">
            <button
              class="my_ans"
              style="background: linear-gradient(-90deg, #fa4e4e, #fd894f)"
            >
              <!-- @click="get_ask(1, 0)" -->
              我的提问
            </button>
            <!-- <button
              class="other_ans"
              style="background-color: #fdaf42"
              @click="get_ask(0, 0)"
            >
              全部问答
            </button> -->
          </div>
          <!-- <div class="que_tit">
            <input
              type="text"
              v-model="wd_tit"
              placeholder="请输入需要提问的标题"
            />
          </div> -->
          <div class="que_info">
            <textarea placeholder="请输入您要提问的内容" v-model="wd_info">
            </textarea>
          </div>
          <div class="upd_box">
            <el-upload
              action="https://rongyue.rongyuejiaoyu.com/api/v1.common/upload"
              list-type="picture-card"
              :on-preview="imgPreview"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btm_btns">
            <button @click="close_wd">取消</button>
            <button @click="submit_wd(wd_info)">保存</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 缩略图展示 -->
    <el-dialog :visible.sync="wd_preview_show">
      <img width="100%" :src="wd_preview_img" alt="缩略图" />
    </el-dialog>
    <!-- 问答列表 -->
    <transition name="leftToright">
      <div class="common_dialog ask_box" v-if="ask_show">
        <div class="inner_box">
          <div class="top">
            <img
              src="https://www.rongyuejiaoyu.com/static/index/images/head5.jpg"
              alt="user_ava"
            />
            <h5>ask_tit</h5>
            <button @click="ask_show = false">关闭</button>
          </div>
          <div class="tit_div">
            <p class="count">0条提问</p>
            <div class="type">
              <p :class="{ act_type: ask_type == 1 }" @click="get_ask(1, 1)">
                我的
              </p>
              <p :class="{ act_type: ask_type == 0 }" @click="get_ask(0, 1)">
                全部
              </p>
            </div>
          </div>
          <div class="list_item">
            <div class="item" v-for="(e, i) in ask_list" :key="i">
              <div class="top_con">
                <div class="avatar_box"><img :src="e.avatar" alt="" /></div>
                <div class="ana_box">
                  <p class="name">{{ e.username }}</p>
                  <p class="time">{{ e.new_add_time }}</p>
                  <p class="con">{{ e.question_title }}</p>
                </div>
              </div>
              <div class="img_box">
                <img
                  @click="show_big(item)"
                  :src="item"
                  alt=""
                  v-for="(item, index) in e.images"
                  :key="index"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 纠错 -->
    <transition name="leftToright">
      <div class="common_dialog jc_dialog" v-if="correct_err_show">
        <div class="inner_con">
          <div class="title">
            纠错
            <div class="close" @click="close_err"></div>
          </div>
          <div class="body">
            <p class="t_title">
              CFALevel II“甄”题库Economics(2024N) LM1 Currency Exchange Rates:
              Understanding Equilibrium Value
            </p>
            <div class="choose_box">
              <el-radio-group v-model="error_form.err_choose">
                <el-radio
                  size="medium"
                  v-for="(item, i) in jiucuoErrorList"
                  :key="item"
                  :label="i"
                >
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </div>
            <textarea
              placeholder="感谢您的意见和体验感受，我们一定会快速解决您的..."
              class="jc_input"
              v-model="error_form.correct_info"
            >
            </textarea>
          </div>
          <div class="btm_btn">
            <button class="cancel" @click="close_err">取消</button>
            <button class="sure" @click="submit_err(InfoListObj.id)">
              确定
            </button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 交卷 -->
    <transition name="leftToright">
      <div class="mask_unfinished" v-show="submitShow">
        <div class="kuang" ref="isDomsk">
          <img
            src="https://www.rongyuejiaoyu.com/newzhike/img/unfinished.png"
            alt=""
          />
          <p>确认提交试卷？</p>
          <div class="error_btn">
            <a href="javascript:void(0);" class="a_submit" @click="submitTest">
              提交
            </a>
            <a
              href="javascript:void(0);"
              class="a_cancel"
              @click="submitShow = false"
            >
              取消
            </a>
          </div>
        </div>
      </div>
    </transition>

    <!-- 暂停做题 -->
    <transition name="leftToright">
      <div class="mask-pause" v-show="pauseShow">
        <div class="kuang">
          <img
            src="https://www.rongyuejiaoyu.com/newzhike/img/icon-save.png"
            alt=""
          />
          <p>休息一下，马上回来！</p>
          <div class="stopBtn" @click="pauseHide">继续做题</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {
  addTopicError,
  getTopicErrorType,
  getTopicList,
  getTopicInfo,
  addSubTopicLog,
  addSubmitLog,
  getTopLog,
  addQuestionByTopic,
  addCollection
} from '@/api/FRM.js'

export default {
  name: 'frmPractice',
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为, 立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: '' // url地址
          }
        ],
        // poster: '@/assets/images/material/video-bg.png', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      clickId: 0, // 当前选项按钮
      topic_model: '', // 1做题模式 0背题模式
      type_t: '',
      wd_tit: '', // 问答标题
      wd_info: '', // 问答内容
      note_list: [], // 笔记列表
      filelist: [], // 文件上传列表
      fullImageUrl: '',
      ask_list: [], // 问答列表
      wd_preview_show: false, // 控制打开变量
      wd_preview_img: '', // 缩略图文件
      donum: 0, // 已做题数
      submitShow: false, // 交卷
      nowposition: 0, //当前题的题号
      user_answer_index: -1,
      opena: -1, // 1 掌握 2未掌握 -1 初始值
      seconds: 0, // 计时时间
      user_analysis: false,
      pauseShow: false,
      timing: '00:00:00',
      Init: null,
      testTime: 0,
      ask_type: 1,
      ask_show: false,
      wd_show: false, // 提问
      correct_err_show: false, // 纠错
      error_form: {
        err_choose: 0, // 纠错/复选框
        correct_info: '', // 纠错/文本域
        your_phone: '' // 纠错/ 手机号
      },
      is_collection: false,
      cid: '',
      vsrc: '',
      cate_name: '',
      tid: 0, //当前题目的tid
      report_id: '', // 提交接口
      xq_report: 0, //学习报告id
      cardtype: 1, // 答题卡 题型参数
      testarr: [], // 请求返回的单选题暂存数组list
      topicarr: [], // 请求返回的题目重组数组
      oplist: ['A', 'B', 'C', 'D', 'E'], //选项序号 循环数组
      InfoListObj: {},
      answerValue: '',
      frmOpList: [],
      topicList: [],
      answerList: [],
      sheetArr: [],
      objTopicData: {},
      log_id: '',
      jiucuoErrorList: []
    }
  },
  created() {
    this.start()
    this.getTopicList()
    this.topic_model = this.$route.query.model
    this.type_t = this.$route.query.type
    this.cid = localStorage.getItem('frmcid')
    console.log(this.$route.query, '跳转参数')
    this.ErrorCorrection()
  },
  mounted() {
    if (this.$route.name == 'frmPractice') {
      this.addOne()
    }
  },
  methods: {
    async ErrorCorrection() {
      const { data: data } = await getTopicErrorType()
      this.jiucuoErrorList = data.data
    },
    async answerSheet(logId) {
      let form = {
        cid: '8',
        log_id: logId
      }
      const { data: data } = await getTopLog(form)
      this.sheetArr = data.data.list
    },
    getTopicList() {
      getTopicList({ id: 8 }).then(({ data: data }) => {
        this.objTopicData = data.data
        this.topicList = data.data.list
        this.nowposition = data.data.list[0].id
        this.log_id = data.data.log_id
        this.getDateInfoList(data.data.list[0].id, data.data.log_id)
        this.answerSheet(data.data.log_id)

        console.log(data, 1111111111)
      })
    },
    getDateInfoList(tid, log_id) {
      let params_info = {
        cid: 8, // 二级id
        log_id: log_id,
        tid: tid // 默认第0项
      }
      getTopicInfo(params_info).then(({ data: data_f }) => {
        this.$set(data_f.data, 'user_answer_index', -1)
        let arr = data_f.data.op.filter((ele, index) => {
          return ele.is_xuan == true
        })

        if (data_f.data.collection) {
          data_f.data.collection = data_f.data.collection
        } else {
          data_f.data.collection = false
        }

        if (data_f.data.is_value) {
          data_f.data.is_value = data_f.data.is_value
        } else {
          data_f.data.is_value = arr.length <= 0 ? '' : arr[0].value
        }
        this.InfoListObj = data_f.data
        this.frmOpList = data_f.data.op
        this.tid = data_f.data.id
        console.log(this.InfoListObj, '题目项')
      })
    },
    addOne() {
      this.$store.commit('hideGlobalComponent', false)
    },
    get_ask(id, is_open) {
      if (!is_open) {
        this.wd_show = false
        this.ask_show = true
      }
      this.ask_type = id
    },
    toscan(it_e) {
      if (it_e == -1) {
        this.$message.warning('请选择答案')
      } else {
        this.user_analysis = !this.user_analysis
      }
    },
    async submit_err(id) {
      console.log(this.error_form)
      if (this.error_form.correct_info !== '') {
        let jiucuo = {
          tid: id,
          type: this.error_form.err_choose,
          content: this.error_form.correct_info
        }
        const { data: data } = await addTopicError(jiucuo)
        if (data.code == 1) {
          layer.msg(data.msg)
        } else {
          layer.msg('纠错失败！')
        }
      } else {
        layer.msg('请填写内容')
      }
    },
    close_err() {
      // 纠错
      this.correct_err_show = false
      this.error_form.correct_info = ''
      this.error_form.your_phone = ''
      this.error_form.err_choose = '0'
    },
    // 收藏
    async shoucang(item) {
      item.collection = !item.collection
      this.is_collection = !item.collection
      const { data: data } = await addCollection({ tid: item.id })
      if (data.code == 1) {
        layer.msg(data.msg)
      }

      // if (!data.data.is_collection) {
      //   this.$message.success('取消收藏成功')
      // } else {
      //   this.$message.success('收藏成功')
      // }
    },
    // 试卷提交
    async ProblemSolving(answer, position_num) {
      let _that = this

      let defRecord = []
      _that.InfoListObj.op.map((ele, index) => {
        if (ele.is_xuan == true) {
          defRecord.push(ele.value)
          console.log(defRecord)
        }
      })
      let answerDef = defRecord.join(',')
      console.log(_that.answerList, '答案11111', answer)

      let add_log = {
        tid: _that.topicList[position_num].id,
        cid: '8',
        sort: _that.objTopicData.sort,
        log_id: _that.objTopicData.log_id,
        answer: _that.InfoListObj.type == '4' ? answer : answerDef
      }
      const { data: data } = await addSubTopicLog(add_log)
      console.log(add_log, 3333333, answerDef)
    },
    chose_answer(option, item, index) {
      let _this = this
      if (item.type == '1' || item.type == '3') {
        // 单选题
        item.op = item.op.map((item) => ({
          ...item,
          is_xuan: item.value == option.value
        }))
        this.frmOpList = item.op
      } else if (item.type == '2') {
        // 多选
        option.is_xuan = !option.is_xuan
      } else if (item.type == '4') {
        // 填空题
        console.log(123, item.user_answer)
        _this.answerList.push(item.user_answer)
      }

      //  选中选项
      let is_anserw = item.op.filter((ele, i) => {
        return ele.is_xuan == true
      })
      _this.answerList = is_anserw
      console.log(is_anserw, '选中答案项', _this.answerList)
    },

    // 上一题
    toprev(position) {
      this.nowposition = Number(position) + 1
      if (this.nowposition > this.topicList.length) {
        this.nowposition = this.topicList.length
        this.$message.warning({
          message: '没有上一题了',
          type: 'warning',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--warning'
          // offset: 80
        })
        return false
      }
      this.getDateInfoList(this.nowposition, this.log_id)
    },

    // 下一题
    tonext(position, item) {
      console.log(position, this.nowposition, item)
      let anserArr = []
      this.answerList.map((ele, index) => {
        if (ele.is_xuan == true) {
          anserArr.push(ele.value)
        }
      })
      let answer = item.type == '4' ? item.user_answer : anserArr.join(',')
      this.answerValue = answer

      this.nowposition = Number(position) - 1
      let position_num = this.topicList.length - position

      if (this.nowposition < 1) {
        this.nowposition = 1
        this.$message.warning({
          message: '没有下一题了',
          type: 'warning',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--warning'
          // offset: 80
        })
        this.ProblemSolving(answer, position_num)
        return false
      }
      this.getDateInfoList(this.nowposition, this.log_id)
      // 提交做题记录
      this.ProblemSolving(answer, position_num)
      // 题目更换，把上一题目置【】
      this.answerList = []
    },
    // 暂停计时
    stop() {
      clearInterval(this.Init)
      this.pauseShow = true
      console.log(this.seconds)
    },
    pauseHide() {
      this.pauseShow = false
      this.start()
    },
    async submitTest() {
      // 交卷
      const { data: data } = await addSubmitLog({ log_id: this.log_id })
      if (data.code == 1) {
        this.$router.push({
          path: '/exam_practice/FRM/frmReport',
          query: {
            log_id: this.log_id
          }
        })
      }
    },
    howmuch() {
      let _this = this
      _this.donum = 0
      _this.topicarr.map((ele) => {
        if (ele.user_answer_index && ele.user_answer_index != -1) {
          _this.donum++
          return false
        } else if (ele.is_true != -1) {
          _this.donum++
        }
      })

      console.log(_this.donum, '做题数')
    },
    // 答疑保存
    async submit_wd(val) {
      let sub_data = {
        content: val,
        image: this.fullImageUrl,
        tid: this.tid
      }
      let { data: data } = await addQuestionByTopic(sub_data)
      if (data.code == 1) {
        layer.msg(data.msg)
      }
      console.log(sub_data, 132, val)
    },
    cardto(ite) {
      //答题卡跳转
      this.getDateInfoList(ite.tid, this.log_id)
      this.nowposition = ite.tid
    },
    close_wd() {
      this.wd_tit = ''
      this.wd_info = ''
      this.filelist = []
      this.wd_show = false
    },
    imgPreview(file) {
      this.wd_preview_img = file.url
      this.wd_preview_show = true
    },
    handleAvatarSuccess(res, file) {
      this.fullImageUrl = res.data.fullurl
      console.log(res)
    },
    handleExceed() {
      this.$message.warning('最多上传三张图片！')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 字符串转实体
    stringToEntity(str) {
      var div = document.createElement('div')
      div.innerText = str
      div.textContent = str
      var res = div.innerHTML
      console.log(str, '->---字符串转实体---', res)
      return res
    },
    start() {
      this.Init = setInterval(this.timers, 1000)
    },
    timers(num) {
      if (num) {
        this.seconds = this.testTime
      }
      this.seconds++
      var second = this.seconds % 60
      var minute = parseInt(this.seconds / 60) % 60
      var hour = parseInt(this.seconds / 3600)
      this.timing = `${hour < 10 ? '0' + hour : hour}:
      ${minute < 10 ? '0' + minute : minute}:
      ${second < 10 ? '0' + second : second}`
    },
    // 监听播放
    onPlayerPlay(player) {
      // this.$signalr.SendMsg(6301, this.id, '开始播放视频')
      console.log('开始播放视频')
    },
    // 暂停视频
    onPlayerPause(player) {
      // this.$signalr.SendMsg(6302, this.id, '暂停视频')
      console.log('暂停视频')
    },
    // 视频继续播放
    onPlayerPlaying(player) {
      // this.$signalr.SendMsg(6303, this.id, '视频继续播放')
      console.log('视频继续播放')
    },
    // 视频播放结束
    onPlayerEnded(player) {
      // this.$signalr.SendMsg(6304, this.id, '视频播放结束')
      console.log('视频播放结束')
    }
  },
  beforeDestroy() {
    // 组件实例被销毁时执行结束
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/frm_practice.scss';

.el-breadcrumb {
  font-size: 16px;
  padding: 24px 12px;
  background-color: #fff;
  border-radius: 5px;
  margin: 10px 0;
}

.tbtn {
  display: flex;
  div {
    margin-right: 12px;
    margin-top: 8px;
    cursor: pointer;
  }
}

.textinput {
  width: 80%;
  height: 55px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 5px;
  color: #333;
  font-size: 16px;
  line-height: 20px;
}
</style>
